/**
 * Created by tdzl2003 on 8/24/16.
 */
import React from 'react';
import { Button, InputNumber, Popconfirm } from 'antd';
import {get, put, $delete} from '../../logics/rpc';
import ObjectTable from '../../components/ObjectTable';
import {formatDate} from "../../utils/formatDate";
import Editable from '../../components/Editable';
import AddGoodModal from './AddGoodModal';
import ChangeGame from './ChangeGame';

function editGood({id}, field, value) {
  return put(`/admin/good/${id}/edit/${field}`, {value});
}

function editableColumn(title, key, {format, ...props} ={}) {
  return {
    title,
    key,
    render: good => (
      <Editable
        value={format?format(good[key], good):good[key]}
        onEnter={value => editGood(good, key, value)}
        {...props}
      />
    ),
  }
}

export default class List extends React.Component{
  state={
    addGoodModalVisible: false,
    ChangeVisible:false,
    sort:null,
  };
  fetchData = (params) => get('/admin/game/packageList', params);
  columns = [{
    title: 'ID',
    dataIndex: 'id',
    width: 60,
  }, {
    title: '游戏ID',
    dataIndex: 'app_id',
  },{
    title: '名字',
    dataIndex: 'title',
  },{
    title: '礼包内容',
    dataIndex: 'content',
  },{
    title: '礼包总数',
    dataIndex: 'remain',
  },{
    title: '礼包剩余数量',
    dataIndex: 'total',
  },{
    title: '礼包使用时间',
    dataIndex: 'start_time',
  },{
    title: '礼包过期时间',
    dataIndex: 'end_time',
  },{
    title: '',
    render: (sort) => (
        <div>
          <Button
              size="small"
              onClick = {async ()=>{
            this.setState({
              ChangeVisible: true,
              sort:sort,
            })

          }}
          >编辑</Button>
        </div>
    ),
  }, {
      title: '',
      render: (good) => (
        <div>
          <Popconfirm placement="topRight" title={`确认删除游戏${good.name}吗？`} onConfirm={()=>this.deleteAcc(record)}>
            <Button size="small">删除</Button>
          </Popconfirm>
        </div>
      ),
    }];
  async deleteAcc(record) {
    try {
      await $delete(`/admin/game/${record.id}`);
      this.refs.table.removeItem(record);
    } catch (err) {
      switch (err.code) {
        case 409: alert('您不能冻结您自己！');break;
        default:alert('冻结失败');break;
      }
    }
  }
  showAddGood = () =>{
    this.setState({
      addGoodModalVisible: true,
    });
  };
  dismissAddGood = () => {
    this.setState({
      addGoodModalVisible: false,
    });
  }
  dismissChange = () => {
    this.setState({
      ChangeVisible: false,
    });
  }
  renderHeader = () => {
    return (
      <div>
        <Button onClick={this.showAddGood}>添加礼包</Button>
      </div>
    );
  };
  onGoodAdded = () => {
    this.refs.table.refresh();
  };
  render() {
    const {addGoodModalVisible,ChangeVisible,sort} = this.state;
    return (
      <div>
      <ObjectTable
        ref="table"
        expandedRowRender={editableColumn('描述', 'description', {type:'textarea', autosize:true}).render}
        columns={this.columns}
        fetchData={this.fetchData}
        title={this.renderHeader}
      />
        <AddGoodModal
            visible ={addGoodModalVisible}
            dismiss ={this.dismissAddGood}
            onAdded ={this.onGoodAdded}
        />
        <ChangeGame
            visible ={ChangeVisible}
            dismiss ={this.dismissChange}
            onAdded ={this.onGoodAdded}
            {...sort}
        />
      </div>
    );
  }
}
